<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />
    </div>
    <div>
      <!-- 绑定原生点击事件，在时间后方加native -->
      <ArticleItem
        @click.native="cellClickFn(searchresult.art_id)"
        v-for="(searchresult, index) in searchRes"
        :key="index"
        :value="searchresult"
        immediate-check="false"
      ></ArticleItem>
    </div>
  </div>
</template>

<script>
import { getSearchResult } from '@/api'
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  name: 'SearchResult',
  data () {
    return {
      searchRes: []
    }
  },
  components: { ArticleItem },
  async created () {
    const result = await getSearchResult(this.$route.params.kw)
    this.searchRes = result.data.data.results
  },
  methods: {
    // 文章单元格点击事件
    cellClickFn (id) {
      this.$router.push({ path: '/articledetail', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
